<template>
  <div class="page selfMiniAppManage">
    <div class="scroll-view">
      <customHeader middleTitle="小程序管理" @leftCallBack="goBack"></customHeader>
      <applyStore v-if="applyStoreShow"
                     ref="applyStore"
                     @handleCancel="handleCancel" />
      <div class="page-body">
        <no-data msg="如需开通更多小程序套餐，请联系您的销售经理" v-if="!loading&&list.length==0"></no-data>
        <ul class="self-app-list">
          <li class="item" v-for="(item,index) in list" :key="index">
            <div class="app-info">
              <img class="logo" :src="item.appLogoUri||defaultLogo" @error="onImgError(item)"/>
              <p class="name">{{item.appName}}</p>
              <p class="info">订购时间：{{formateDateTime(item.createTime)}}</p>
              <div class="options disabled" v-if="item.authorized==2">已授权</div>
              <div class="options" @click="toMiniAPPAuthorize(item)" v-if="item.authorized==1">绑定授权</div>
            </div>
            <ul class="ope-list">
              <li @click="showApplyStore(item)">
                <span>适用门店</span>
                <div>
                  <span class="shop-name">{{storeFormate(item.shopModels)}}</span>
                  <i class="zhk-list_rarrow"></i>
                </div>
              </li>
            </ul>
          </li>
        </ul>
          <div v-show="noMore&&!loading&&list.length!==0" class="no-more">
            <span>如需开通更多小程序套餐，请联系您的销售经理</span>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast, MessageBox } from "mint-ui";
import config from "../../base/profile/config.json";
import jsBridge from '../../tools/jsBridge.js';
import noData from "../../components/noData/noData";
import applyStore from "./applyStore";
import moment from "moment";
export default {
  name: "selfMiniAppManage",
  data() {
    return {
      applyStoreShow:false,
      config: config,
      noMore: false,
      list: [],
      loading:false,
      defaultLogo:config.shopImgUrlPrefix +"2020/03/13/09/106211584064560.png"
    };
  },

  methods: {
    onImgError(item){
      if(item.appLogoUri != this.defaultLogo){
        item.appLogoUri = this.defaultLogo
      }
    },
    formateDateTime(date) {
      if (date) {
        return moment(date).format("YYYY-MM-DD HH:mm:ss");
      } else {
        return date;
      }
    },
    goBack(){
      if (this.applyStoreShow) {
        this.applyStoreShow = false;
      } else {
        if (String(this.$route.query.close) == "true") {
          jsBridge.closeWindow();
        } else {
          this.$router.back();
        }
      }
    },
    storeFormate(shopModels) {
      let v = "";
      if (shopModels.length === 1) {
        v = shopModels[0].shopName;
      }else {
        v = "已选" + shopModels.length + "家门店";
      }
      return v;
    },
    toMiniAPPAuthorize(item){
      jsBridge.openWindow({
        url: config.miniAPPAuthorizeUrl+'?o='+item.packageOrderId+'&p='+item.supplierId,
        target: "server",
        needTitle: true,
        title:'扫码授权',
        suffixParams: ''
      });
    },

    queryPackageList(){
      this.loading = true;
      this.ajax({
        url: `/newapp/miniManage/queryPackageList.do`,
        type: "get",
      }).then(res => {
        this.loading = false;
        if (res.success) {
          this.list = res.resultObject;
          if (this.list.length ==0) {
            Toast('很抱歉，该账号暂未订购小程序，请联系您的销售经理订购该服务。');
          }
        } else {
          Toast(res.msg);
        }
        this.noMore= true;
      }).catch(err => {
        this.loading = false;
        this.noMore= true;
      });
    },
  showApplyStore(item) {
      this.applyStoreShow = true;
      this.$nextTick(() => {
        this.$refs.applyStore.popupShow(item);
      });
    },
    handleCancel() {
      this.applyStoreShow = false;
    },
  },

  mounted() {
    this.queryPackageList();
    jsBridge.addResumeEventListener(() => {
      this.queryPackageList();
      //激活
    });
  },
  components: {
    customHeader,
    noData,
    applyStore
  }
};
</script>
<style lang='scss' scoped>
@import "miniAppManage";
</style>
